<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后代选择器渲染文章标题样式</title>
	</head>
	<style>
		ul li a {
			color: red;
		}
		ul li {
			list-style-type: none;
		}
		.green li a{
			color: green;
		}
		.article-title p{
			font-weight: 700;
			font-size: 16px;
			color: #1c1f21;
			line-height: 30px;
		}
		.article-title a {
			text-decoration: none;
		}

	</style>
	<body>
		<div class="article-title">
			<div>
				<div>
					<a href="">
						<p>LeetCode 周赛 336，多少人直接 CV？</p>
					</a>
				</div>
			</div>
			<div>
				<div>
					<a href="">
						<p>通用缓存存储方案设计</p>
					</a>
				</div>
			</div>
			<div>
				<div>
					<a href="">
						<p>一进群就水群？试试这个水群拦截工具</p>
					</a>
				</div>
			</div>
			<div>
				<div>
					<a href="">
						<p></p>
					</a>
				</div>
			</div>
			<div>
				<div>
					<a href="">
						<p></p>
					</a>
				</div>
			</div>
		</div>
		
		
		<ul>
			<li><a href="">前端开发</a></li>
			<li><a href="">后端开发</a></li>
			<li><a href="">云计算/大数据</a></li>
			<li><a href="">移动开发</a></li>
			<li><a href="">人工智能</a></li>
		</ul>
		<ol>
			<li><a href="">前端开发</a></li>
			<li><a href="">后端开发</a></li>
			<li><a href="">云计算/大数据</a></li>
			<li><a href="">移动开发</a></li>
			<li><a href="">人工智能</a></li>
		</ol>
		<ul class="green">
			<li><a href="">前端开发</a></li>
			<li><a href="">后端开发</a></li>
			<li><a href="">云计算/大数据</a></li>
			<li><a href="">移动开发</a></li>
			<li><a href="">人工智能</a></li>
			<div><a href="">ETL工程师</a></div>
		</ul>
		
	</body>
</html>